Home:ALL Converter>How to serve angular nx app with internal routing from express?

How to serve angular nx app with internal routing from express?

Ask Time:2021-03-29T01:58:45         Author:Kirill K

Json Formatter

I have Node.js + Express backend app with some static routes, some internal (api) routes and Angular 11 app on frontend. Now I'm trying to rebuild frontend using nrwl nx into three independent apps with shared libs but stuck with express routes.

Current version use one static route to serve whole angular app:

app.use("/", express.static(path.join(__dirname, "frontend")));

It works well, but when I'm trying to split routes like

app.use("/crm/admin/", express.static(path.join(__dirname, "crm-admin")));
app.use("/crm/moderator/", express.static(path.join(__dirname, "crm-moderator")));
app.use("/", express.static(path.join(__dirname, "client")));

I've got issues with angular routing inside admin or moderator apps - production build static app won't load anything as it shown here

If I edit index base href to point to /crm/admin/ it still won't load page for same reason enter image description here

Only if I remove all hash from filenames app loading enter image description here but still have ussues with internal routing: It gives ability to log in and then redirect as it assumed in auth effect. but any other routes are not working as they do in serving app and written in root routes:

path: '',
component: AppComponent,
children: [
  {
    path: 'login',
    component: AuthComponent,
  },
  {
    path: 'logout',
    component: AuthLogoutComponent,
  },
  {
    path: 'personal',
    loadChildren: () =>
      import('./components/personal/personal.module').then(
        (m) => m.PersonalModule
      ),
    canActivate: [AuthGuardService],
  },
  {
    path: 'orders',
    loadChildren: () =>
      import('./components/orders/orders.module').then(
        (m) => m.OrdersModule
      ),
    canActivate: [AuthGuardService],
  },
  {
    path: '**',
    redirectTo: 'personal',
    pathMatch: 'full',
  },
],

For testing purposes I've already tried to point crm-admin folder to "/" route. It works same as if I reproduce steps written above with broken routing.

Please, point me what I'm missing during building nx angular app with internal routing and trying to serve it from static express route. Highly unlike to rebuild existing express app into nx controlled express app, if it possible. It works as intended and no needed to any changes.

Thanks in advance.

upd:

tried to add this

app.use("/crm/admin/", express.static(path.join(__dirname, "crm-admin")));
app.get("/crm/admin/", function (req, res) {
  res.sendFile(path.join(__dirname, "./crm-admin/index.html"));
});

and rebuild not using --configuration=production. After fixing base href token in index file it works, but still have issues with routing If I try to change path in the browser address bar.

upd2:

If I add

"baseHref": "/crm/admin/",
"deployUrl": "/crm/admin/",

into angular.json into build section, builded app already have base href token pointed to express route, I've want it be served from, as well as it serving locally from localhost:4201/crm/admin but routing errors still present on builded app.

Author:Kirill K,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/66844502/how-to-serve-angular-nx-app-with-internal-routing-from-express
yy